<template>
  <div class="shopApply-warpper">
    <div class="topBox">
      <span>请先通过实名认证后入驻</span>
    </div>
    <!-- <div class="fengeBar"></div> -->
    <group class="groupBox">
      <x-input type="text" placeholder="店铺名" show-clear v-model="shopName">
      </x-input>
      <x-input type="text" placeholder="真实姓名" show-clear v-model.trim="name">
      </x-input>
      <x-input type="text" placeholder="身份证号" show-clear v-model="card">
      </x-input>
    </group>
    <div class="next-box flex">
      <div @click="handleNext">下一步</div>
    </div>
  </div>
</template>

<script>
  import axios from '@/api/request'
  import { Group,XInput } from "vux";

  export default {
    name: '',
    components: {
      Group,
      XInput,
    },
    data () {
      return {
        name: '',
        card: '',
        shopName: ''
      }
    },
    created(){
      
    },
    mounted(){

    },
    methods:{
      handleNext(){
        let username = this.name
        let card = this.card
        let shopName = this.shopName
        if(username&&card&&shopName){
          this.$router.push({path: 'uploadCard',query:{realname:username,card:card,shopName:shopName}})
        }else{
          this.$vux.toast.text('请填完整后再提交', 'middle')
        }
      }
    }

  };
</script>

<style >
    body{
        position: absolute;
        left: 0;
        top: 0;
        /*background: rgb(244,244,244);*/
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    .shopApply-warpper .weui-cells.vux-no-group-title{
      margin-top: 0;
    }
    .shopApply-warpper .weui-cells:before{
      border-top: 0;
    }
    .shopApply-warpper input::-webkit-input-placeholder{
      color: #aaa;
      font-size: 30rem/75;
    }
</style>
<style lang="less" scoped>
  .shopApply-warpper{
    height: 100%;
    box-sizing: border-box;
    background: #fff;
    .weui-cells{
      margin-top: 0;
    }
    .vux-no-group-title{
      margin-top: 0;
    }
    .weui-cells .weui-cell:before {
      left: 0;
      border-top: 0;
    }
    .weui-cell {
      padding-left: 2px;
      border-bottom: 1px solid #ddd;
    }
    .vux-x-input.weui-cell{
      height: 100rem/75;
      padding-top: 18rem/75;
      padding-bottom: 0;
    }
    .topBox{
      height: 96rem/75;
      line-height: 96rem/75;
      background: #f2f3f6;
      span{
        margin-left: 30rem/75;
        font-size: 26rem/75;
        color: #ff4444;
      }
    }
    // .fengeBar{
    //   height: 14rem/75;
    //   background: #f2f3f6;
    // }
    .groupBox{
      padding: 0 30rem/75;
    }
    .next-box{
      width: 100%;
      justify-content: center;
      margin-top: 80rem/75;
      div{
        width: 600rem/75;
        height: 104rem/75;
        line-height: 104rem/75;
        background: #ffda44;
        color: #333;
        text-align: center;
        font-size: 35rem/75;
        border-radius: 8rem/75;
      }
    }
  }

</style>

